2-事件，值传递

Create by fall on：2021-11-14 Recently revised in：2022-01-19

Class传递

// const MyContext = React.createContext(value)
// 这个传入的值，只有没有匹配到 provider 时才回生效
const MyContext = React.createContext()
// 生成的 MyContext 上面有 Provider,Consumer,contextType,displayName
const { Provider,Consumer } = MyContext 
// Provider 用来提供数据，Consumer 内部的所有组件都会接收到数据
class BiteMe extends React.Component{
  render(){
    return (<div>
        <Consumer>
          {value=>`传过来的数据是这个${value.username}`}
        </Consumer>
      </div>)
  }
}
export default class Vivcv extends React.Component{
  state={username:'刘希'}
render(){
  return(<div>
      <h1>人们从来不懂</h1>
      <Provider value={this.state}>
        <BiteMe/>
      </Provider>
    </div>)
}
}

类型检查

prop-types

应用在增长过程中，原本组件接收的数据格式，可能存在改变，使用 PropTypes 可以进行类型检查，用来捕获可能出现的错误。

React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库代替。

出于性能考虑，只在开发模式下进行检查。

import PropTypes from 'prop-types'
class Greet extends Components{
  render(
  <h1>来了，我的宝{this.props.name}</h1> 
  )
}
Greet.propTypes ={
  name:PropTypes.string // 验证 string
}
// 其他验证
Greet.propTypes = {
  optionalArray:PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  // 任何可被渲染的元素
  optionalNode:PropTypes.node,
  optionalElement:PropTypes.element, // 一个 react 元素
  optionalElementType:PropTypes.elementType, // 元素类型
  optionalMessage:Prototypes.instanceOf(Message), // 可以声明 prop 为类的实例，在这里使用
  optionalEnum:PropTypes.oneOf(['News','Photos']), // 指定 prop 为特定的值
  optionalUnion:PropTypes.oneOfType([ // 指定为几个类型中的一个值
  	PropTypes.string,
    PropTypes.number,
  	PropTypes.instanceOf(Message)
  ]),
  optionalArrayOf:PropTypes.arrayOf(PropTypes.number), // 一个数组由某一类型的元素组成
  optionalObjectOf:PropTypes.objectOf(PropTypes.number), // 一个对象由某一类型的值组成
  optionalObjectWithShap:PropTypes.shape({ // 指定一个对象由特定的类型值组成
    
    color:PropTypes.string,
    fontSize:PropTypes.number
  }),
	optionalObjectWithStrictShape:PropTypes.exact({ // 如果有多余的属性就会报错
    name:PropTypes.string,
    quantity:PropTypes.number
  }),
  requiredFunc:PropTypes.func.isRequired, // 可以在任意属性后面添加 isRequired 表明该值是必填的
  requiredAny:PropTypes.any.isRequired, // 任意类型的必填数据
  // 自定义验证器，会在验证失败的时候返回一个 Error 对象
  customProp:function(props,propName,componentName){
    if(!/matchme/.test(props[propName])){
      return new Error(
      'Invalid prop `'+propName+'` supplied to `' + componentName + '`. Validation failed'
      )
    }
  },
  // 你也可以提供一个自定义的 `arrayOf` 或 `objectOf` 验证器。
  // 它应该在验证失败时返回一个 Error 对象。
  // 验证器将验证数组或对象中的每个值。验证器的前两个参数
  // 第一个是数组或对象本身
  // 第二个是他们当前的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
}

限制必须要传 一个元素

import PropTypes from 'prop-types'
class MyComponent extends React.Component{
  render(){
    const children = this.props.chidren
    return(
      <div>
        {children}
      </div>
    )
  }
}
MyComponent.propTypes ={
  children:PropTypes.element.isRequired
}

传递默认值

import PropTypes from 'prop-types'
class MyComponent extends React.Component{
  render(){
    return (
    	<h1>你好！{this.props.name}</h1>
    )
  }
}
MyComponent.defaultProps = {
  name:'来啊，快活啊'
}

Class传递​

类型检查​

prop-types​

Class传递

类型检查

prop-types